<template>
  <div class="app-container">
    <div class="header flex">
      <FormSearch :formFields="searchList" @search="Search" @reset="Search" />
    </div>
    <div class="footer">
      <a-table
        :columns="columns"
        :data-source="state.data"
        style="width: 100%"
        rowKey="level_id"
        :pagination="state.pagination"
        @change="pageChange"
        :loading="state.loading"
        :scroll="{ x: 1200 }"
      >
        <template #bodyCell="{ record, column }">
          <!-- 用户信息 -->
          <template v-if="column.dataIndex === 'userInfo'">
            <div>{{ record.user?.nickname }}</div>
            <div>{{ record.user?.mobile }}</div>
          </template>
          <!-- 商品信息 -->
          <template v-if="column.dataIndex === 'orderGoods'">
            <div class="flex align-center gap">
              <a-image
                v-if="record.orderGoods?.goods_img"
                :src="record.orderGoods?.goods_img"
                :width="80"
              />
              <div class="good-name">
                <a-tooltip>
                  <template #title>{{
                    record.orderGoods?.goods_name
                  }}</template>
                  名称： {{ record.orderGoods?.goods_name }}
                </a-tooltip>
              </div>
            </div>
          </template>
          <template v-if="column.dataIndex === 'actions'">
            <a-space size="small">
              <a-button type="link" @click="handleLog(record)"
                >签到记录</a-button
              >
            </a-space>
          </template>
        </template>
      </a-table>
    </div>
    <SignLog ref="signRef" />
  </div>
</template>
<script setup>
import { orderEnergy } from "@/api/order";
import { reactive, ref } from "vue";
import SignLog from "./components/SignLog.vue";

const signRef = ref();
const searchList = reactive([
  {
    type: "input",
    label: "订单号",
    name: "order_no",
    value: "",
    placeholder: "请输入订单号",
  },
  {
    type: "input",
    label: "用户手机号",
    name: "mobile",
    value: "",
    placeholder: "请输入用户手机号",
  },
  {
    type: "select",
    label: "完成状态",
    name: "finish_status",
    value: null,
    placeholder: "请选择完成状态",
    allowClear: true,
    options: [
      {
        id: 1,
        name: "已完成",
      },
      {
        id: 2,
        name: "未完成",
      },
    ],
  },
  {
    type: "range-picker",
    label: "创建时间",
    name: "create_time",
    value: [],
    placeholder: "请选择",
    showTime: true,
  },
]);
const columns = [
  {
    title: "id",
    dataIndex: "energy_id",
    width: 100,
  },
  {
    title: "订单编号",
    dataIndex: "order",
    width: 200,
    customRender(record) {
      return record.value.order_no;
    },
  },
  {
    title: "用户信息",
    dataIndex: "userInfo",
    width: 180,
  },
  {
    title: "商品信息",
    dataIndex: "orderGoods",
    width: 300,
  },
  {
    title: "订单金额",
    dataIndex: "order",
    width: 150,
    customRender(record) {
      return "￥" + record.value.goods_total || "-";
    },
  },
  {
    title: "创建时间",
    dataIndex: "create_time",
    width: 200,
  },
  {
    title: "操作",
    dataIndex: "actions",
    fixed: "right",
    width: 100,
  },
];
const state = reactive({
  data: [], //表格的数据
  loading: false,
  pagination: {
    total: 0,
    showSizeChanger: true, //是否页码可以改变
    current: 1, //当前xx页面
    pageSize: 10, //一页展示xx条数据
    showTotal: function (total) {
      return "总共" + total + "条数据";
    }, //总共xx条
    showQuickJumper: true,
  }, //分页数据
  searchParams: {
    page: 1,
    limit: 10,
  },
});
//分页变动数据
const pageChange = (pagination) => {
  state.pagination.current = pagination.current;
  state.pagination.pageSize = pagination.pageSize;
  //搜索的参数
  state.searchParams.page = pagination.current;
  state.searchParams.limit = pagination.pageSize;
  //搜索
  getList();
};
//获取列表的数据
const getList = () => {
  state.loading = true;
  orderEnergy({ ...state.searchParams }).then((res) => {
    setTimeout(function () {
      state.loading = false;
    }, 500);
    if (res.code == 0) {
      state.data = res.data.data;
      state.pagination.total = res.data.total;
    }
  });
};
//搜索事件
const Search = (values) => {
  state.searchParams.page = 1;
  //合并之前的搜索参数
  state.searchParams = {
    ...state.searchParams,
    ...values,
    create_time:
      values.create_time.length > 0
        ? [
            dayjs(values.create_time[0]).format("YYYY-MM-DD HH:mm:ss"),
            dayjs(values.create_time[1]).format("YYYY-MM-DD HH:mm:ss"),
          ]
        : [],
  };
  //搜索
  getList();
};
// 签到记录
const handleLog = (record) => {
  signRef.value.show(record);
};
getList();
</script>
<style scoped lang="scss">
@import "./index";
</style>